<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1">
<title>Insert title here</title>
<!-- 富文本编辑器 js引入-->
<script type="text/javascript" charset="utf-8"
	th:src="@{/ueditor/ueditor.config.js}"></script>
<script type="text/javascript" charset="utf-8"
	th:src="@{/ueditor/ueditor.all.min.js}">
	
</script>
<!--建议手动加在语言，避免在ie下有时因为加载语言失败导致编辑器加载失败-->
<!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型，比如你在配置项目里配置的是英文，这里加载的中文，那最后就是中文-->
<script type="text/javascript" charset="utf-8"
	th:src="@{/ueditor/lang/zh-cn/zh-cn.js}"></script>
<script th:src="@{/layui/jquery.min.js}"></script>
<script th:src="@{/layui/layui.js}"></script>
<script type="text/javascript" th:src="@{/common.js}"></script>
<link rel="stylesheet" th:href="@{/layui/css/layui.css}">
<script type="text/javascript">
	$(document).ready(function() {
		var height = $(window).height();
		$("#addDiv").css({
			"height" : height
		});
	});
	window.onresize = function() {
		var height = $(window).height();
		$("#addDiv").css({
			"height" : height
		});
	}
</script>
</head>
<body class="layui-layout-body">
	<div id="addDiv" align="center" style="overflow: auto;">
		<div style="margin-top: 50px;">
			<form id="addForm" class="layui-form layui-form-pane"
				lay-filter="addForm">
				<div class="layui-form-item " style="width: 575px;">
					<div class="layui-input-block">
						<div id="position0" class="layui-input-inline"
							style="border: 1px solid gray; width: 220px; height: 132px;"></div>
						<div class="layui-input-inline" style="width: 120px;">
							<div id="position1" style="border: 1px solid gray; width: 120px; height: 63px;"></div>
							<div id="position2" style="border: 1px solid gray; width: 120px; height: 63px; margin-top: 5px;"></div>
						</div>
					</div>
				</div>

				<div class="layui-form-item">
					<div class="layui-input-block">
						<label class="layui-form-label">位置</label>
						<div class="layui-input-inline" style="width: 320px;">
							<input type="radio" name="position" lay-filter="position"
								value="0" title="位置一" 
								th:checked="${advertisement != null ? advertisement.position == 0 : 'false'}">
							<input type="radio" name="position" lay-filter="position"
								value="1" title="位置二"
								th:checked="${advertisement != null ? advertisement.position == 1 : 'false'}">
							<input type="radio" name="position" lay-filter="position"
								value="2" title="位置三"
								th:checked="${advertisement != null ? advertisement.position == 2 : 'false'}">
						</div>
					</div>
				</div>

				<div class="layui-form-item" id="nameDiv">
					<div class="layui-input-block">
						<label class="layui-form-label"><span style="color: red;">*</span>标题</label>
						<div class="layui-input-inline">
							<input id="name" name="name" placeholder="" class="layui-input"
								maxlength="30"
								th:value="${advertisement != null ? advertisement.title : ''}">
						</div>
					</div>
				</div>
				<div class="layui-form-item">
					<div class="layui-input-block">
						<label class="layui-form-label"><span style="color: red;">*</span>标签</label>
						<div class="layui-input-inline">
							<input id="tag" name="tag" placeholder="" class="layui-input"
								th:value="${advertisement != null ? advertisement.tag : ''}"
								maxlength="30">
						</div>
					</div>
				</div>
				<div class="layui-form-item">
					<div class="layui-input-block">
						<label class="layui-form-label"><span style="color: red;">*</span>图片</label>
						<div class="layui-input-inline" style="width: 260px;">
							<img id="image" th:src="${advertisement != null ? advertisement.image : ''}" style="width: 260px;"> 
							<input style="display: none" name="image" id="imageUrl"
								th:value="${advertisement != null ? advertisement.image : ''}">
							<input onchange="onFileChange(event, 'image')" type="file" name="file" id="file"> 
							<span id="suggest"> </span>
						</div>
					</div>
				</div>

				<div class="layui-form-item">
					<div class="layui-input-block">
						<label class="layui-form-label"><span style="color: red;">*</span>跳转类型</label>
						<div class="layui-input-inline jumptypeparent"
							style="width: 150px;">
							<select id="jumptype" name="jumptype" lay-verify="required" lay-filter="jumptype">
								<option value="-1">请选择跳转类型</option>
								<option value="0"
									th:selected="${advertisement != null ? advertisement.type == 0 : 'false'}">超链接</option>
								<option value="1"
									th:selected="${advertisement != null ? advertisement.type == 1 : 'false'}">H5应用</option>
								<option value="2"
									th:selected="${advertisement != null ? advertisement.type == 2 : 'false'}">帖子</option>
								<option value="3"
									th:selected="${advertisement != null ? advertisement.type == 3 : 'false'}">门禁</option>
								<option value="4"
									th:selected="${advertisement != null ? advertisement.type == 4 : 'false'}">小组</option>
								<option value="5"
									th:selected="${advertisement != null ? advertisement.type == 5 : 'false'}">群聊</option>
							</select>
						</div>
					</div>
				</div>
				<!--todo 小组feedId如何改？ -->
				<div class="layui-form-item" id="feedId">
					<div class="layui-input-block">
						<label class="layui-form-label"> <span style="color: red;">*</span>
							小组feedId
						</label>
						<div class="layui-input-inline">
							<input type="text" id="feed_id" name="feedId" autocomplete="off"
								th:value="${advertisement != null ? advertisement.goGroupId : ''}"
								placeholder="请输入小组feedId" class="layui-input">
						</div>
					</div>
				</div>
				<div class="layui-form-item" id="app_id">
					<div class="layui-input-block">
						<label class="layui-form-label"><span style="color: red;">*</span>
							APPID</label>
						<div class="layui-input-inline">
							<input type="number" id="appId" name="appId" autocomplete="off"
								th:value="${advertisement != null ? advertisement.appid : ''}"
								placeholder="请输入APPID" class="layui-input">
						</div>
					</div>
				</div>

				<div class="layui-form-item" id="url">
					<div class="layui-input-block">
						<label class="layui-form-label"><span style="color: red;">*</span>
							跳转地址</label>
						<div class="layui-input-inline">
							<input type="text" id="jumpUrl" name="url" autocomplete="off"
								th:value="${advertisement != null ? advertisement.url : ''}"
								placeholder="请输入跳转地址" class="layui-input">
						</div>
					</div>
				</div>

				<div class="layui-form-item" id="card_id">
					<div class="layui-input-block">
						<label class="layui-form-label"><span style="color: red;">*</span>
							帖子ID</label>
						<div class="layui-input-inline">
							<input type="text" id="cardId" name="cardId" autocomplete="off"
								th:value="${advertisement != null ? advertisement.cardId : ''}"
								placeholder="请输入帖子ID" class="layui-input">
						</div>
					</div>
				</div>

				<div class="layui-form-item" id="groupChatId">
					<div class="layui-input-block">
						<label class="layui-form-label"><span style="color: red;">*</span>
							群聊ID</label>
						<div class="layui-input-inline">
							<input type="text" id="groupchat_id" name="groupChatId"
								autocomplete="off"
								th:value="${advertisement != null ? advertisement.groupChatId : ''}"
								placeholder="请输入群聊ID" class="layui-input">
						</div>
					</div>
				</div>

				<div class="layui-form-item">
					<div class="layui-input-block" style="margin-left: 0px;">
						<input type="radio" name="recommend" value="1" title="推荐"
							th:checked="${advertisement != null ? advertisement.publish == 1 : 'false'}">
						<input type="radio" name="recommend" value="0" title="取消推荐"
							th:checked="${advertisement != null ? advertisement.publish == 0 : 'false'}">
					</div>
				</div>

				<input type="hidden" id="id">
			</form>
		</div>
	</div>
	<script>
		//JavaScript代码区域
		layui.use([ 'laypage', 'layer', 'form' ], function() {
			var laypage = layui.laypage;
			var layer = layui.layer;
			var form = layui.form;
			form.on("select(jumptype)", function(data) {
				var value = data.value;
				showTab(value);
			});
			var radioValue = $('#addDiv input[name="position"]:checked').val();
			console.log(radioValue);
			var color = "#B3D9D9";
			
			if (radioValue==0) {
				$("#suggest").html(" (建议尺寸440*264，大小不超过100KB)");
				$("#position0").css("background-color",color);
			 } else if (radioValue==1){
			 	$("#suggest").html(" (建议尺寸240*126，大小不超过100KB)");
				$("#position1").css("background-color",color);
			 } else {
			 	$("#suggest").html(" (建议尺寸240*126，大小不超过100KB)");
			 	$("#position2").css("background-color",color);
			 }
			
			form.on("radio(position)", function(data) {
				var value = data.value;
				
				 if (value==0) {
					 $("#position0").css("background-color",color);
					 $("#position1").css("background-color","");
					 $("#position2").css("background-color","");
					 $("#suggest").html(" (建议尺寸440*264，大小不超过100KB)");
				 } else if (value==1){
					 $("#position0").css("background-color","");
					 $("#position1").css("background-color",color);
					 $("#position2").css("background-color","");
					 $("#suggest").html(" (建议尺寸240*126，大小不超过100KB)");
				 } else {
					 $("#position0").css("background-color","");
					 $("#position1").css("background-color","");
					 $("#position2").css("background-color",color);
					 $("#suggest").html(" (建议尺寸240*126，大小不超过100KB)");
				 }
				 
			});
			

		});

		var jumptype = $('#jumptype').val();

		showTab(jumptype);
		function showTab(value) {
			if (value == '' || value == '-1') {
				$("#feedId").hide();
				$("#app_id").hide();
				$("#url").hide();
				$("#card_id").hide();
				$("#groupChatId").hide();
			}
			if (value == 5) {
				$("#groupChatId").show();
				$("#feedId").hide();
				$("#app_id").hide();
				$("#url").hide();
				$("#card_id").hide();
			}
			if (value == 4) {
				$("#feedId").show();
				$("#app_id").hide();
				$("#url").hide();
				$("#card_id").hide();
				$("#groupChatId").hide();
			}
			if (value == 1) {
				$("#feedId").hide();
				$("#app_id").show();
				$("#url").show();
				$("#card_id").hide();
				$("#groupChatId").hide();
			}
			if (value == 2) {
				$("#feedId").show();
				$("#app_id").hide();
				$("#url").hide();
				$("#card_id").show();
				$("#groupChatId").hide();
			}
			if (value == 3) {
				$("#feedId").hide();
				$("#app_id").hide();
				$("#url").hide();
				$("#card_id").hide();
				$("#groupChatId").hide();
			}
			if (value == 0) {
				$("#feedId").hide();
				$("#app_id").hide();
				$("#url").show();
				$("#card_id").hide();
				$("#groupChatId").hide();
			}
		}

		function onFileChange(e, val) {
			console.log(e);
			let files = e.target.files || e.dataTransfer.files;
			console.log(files);
			console.log(files[0]['size']);
			if (!files.length) {
				return;
			}
			
			if (files[0]['size']>100000) {
				alert("图片过大！");
				return false;
			}
			//if(!imageSize()){
				//createImage(files, val);
			//}
			imageSize(files, val)
		}
		function imageSize(files, val){
			var radioValue = $('#addDiv input[name="position"]:checked').val();
			
			var mypic = document.getElementById("file").files[0];
			var windowUrl = window.URL.createObjectURL(mypic);
			// 创建对象
			var img = new Image()
			// 改变图片的src
			img.src = windowUrl
			img.onload = function(){
		        if (radioValue == 0  && (img.width != 440 || img.height != 264)) {
		        	layer.msg("图片比例只能为440*264哦！");
		        } else if (radioValue != 0 && (img.width != 240 || img.height != 126)) {
		        	layer.msg("图片比例只能为240*126哦！");
		        }else{
		        	createImage(files, val);
		        }
		        
		    } 
		}
		
		
		
		function createImage(file, val) {
			var self = this;
			// 图片地址
	
			$.get('http://qiniu.systoon.com/getToken.php', function(e) {
				var formData = new FormData();
				formData.append('token', e);
				formData.append('file', file[0]);
				$.ajax({
					url : 'http://upload.qiniu.com',
					type : 'POST',
					data : formData,
					async : false,
					cache : false,
					contentType : false,
					processData : false,
					success : function(e) {
						var url = 'http://apr.qiniu.toon.mobi/' + e.key;
						console.warn(url);
						
						if (val === 'image') {
							debugger
							$("#image").attr('src', url);
							$("#imageUrl").val(url);
						} else if (val == 'bannerUrl') {
							$("#bannerUrl").attr('src', url);
						}

						self.logo = url;
					},
					error : function(e) {
						alert('upload error' + e);
					}
				});
			});
		}
	</script>
</body>
</html>